<template>
	<view class="place-content">
		<view class="place-hearder">
			<image src="../../../static/logo.png"></image>
		</view>
		<view class="place-top">
			<view>Top5</view>
			<uni-row class="flx">
				<view class="user-item" v-for="(item,index) in topFiveList" key="index">
					<view class="user">
						<view class="img">
							<text v-if="index<=2" class="marry marry-huangguan"></text>
							<image :src="dealImage(item)"></image>
							<view class="text">{{item.num }}</view>
						</view>
					</view>
				</view>
			</uni-row>

		</view>

		<view class="place-body">
			<view class="search-box">
				<view class="flx">
					<uni-search-bar v-model="queryParam.search" class="serach-input" cancelButton="none"
						placeholder="请输入查询编号" bgColor="#EEEEEE" @confirm="search" />
					<text class="moreSearch" @click="openDrawer">更多查询</text>
				</view>
			</view>
			<view class="nav-tabs">

			</view>
			<view class="view-body"></view>
		</view>
		<drow-com ref="drowComRef" @closeDrawerData="closeDrawerData"></drow-com>
	</view>
</template>


<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	const userObj = uniCloud.importObject("userObj")

	import drowCom from './comonent/drawer.vue'
	onMounted(() => {
		getTopFive();
		getPlaceInfo();
	})
	const topList = ref([])
	const topFiveList = ref([])
	const queryParam = ref({
		search: '',
		pageIndex: 1,
		pageSize: 10
	})

	const drowComRef = ref()
	const getPlaceInfo = async () => {
		let param = {
			...queryParam.value
		}
		let res = await userObj.getPlaceInfo(param)
		if (res && res.success) {
			console.log(res)
		}
	}
	const getTopFive = async () => {
		let res = await userObj.getTopFiveFun()
		if (res && res.success) {
			topFiveList.value = res.data
		}
	}
	const dealImage = (item) => {
		return item?.picObj.pictures[0]?.url
	}
	const search = (e) => {
		queryParam.value.search = e.value
		queryParam.value.pageIndex = 1
		getPlaceInfo()
	}
	const closeDrawerData = (data) => {
		console.log(data)
	}

	const openDrawer = () => {
		console.log(drowComRef.value.showDrawer.open())
	}
</script>

<style lang="scss" scoped>
	.place-content {
		.place-hearder {
			height: 300rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.search {}

		.serach-input {
			flex: 1;
		}



		.moreSearch {
			padding-right: 10px;
			align-items: center;
			display: flex;
			font-size: 14px;
		}

		.place-top {
			margin-top: 8px;

			.user-item {
				width: 25%;
			}

			.user {
				height: 140rpx;
				justify-content: center;
				align-items: center;
				display: flex;
				flex-direction: column;


				.marry {
					font-size: 32px;
					position: absolute;
					top: -8px;
					right: -7px;
					text-align: right;
				}

				.img {
					position: relative;

					image {
						width: 50px;
						height: 50px;
						border: 1px solid #e7c1c1;
						border-radius: 50%;
					}

					.text {
						position: absolute;
						bottom: -13px;
						background: #eee;
						padding: 1px 0px;
						border-radius: 9px;
						text-align: center;
						width: 100%;
					}
				}

			}
		}

		.place-body {}


	}

	.flx {
		display: flex;
	}
</style>